<template> 
  <div class="Source" ref="sourceRef"></div>
</template>
<script>
import {getworkfromapi} from '@/api/ElectricalDistribution/operation'
import {GetEcharts} from '@/utils/echarts.js'
export default {
  name: 'CallPoliceSource',
  props: {
    logoinfo: {
      type: Object,
      default:()=>{}
    }
  },
  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    getscopedech(entity){
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top:'center',
          right: '3%',
          orient: 'vertial',
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '70%',
            center: ['40%', '50%'],
            color:['#5087ec','#68bbc4','#58a55c','#f2bd42'],
            data: [
              { value: entity.bx, name: '报修' },
              { value: entity.xs, name: '巡视' },
              { value: entity.sy, name: '试验' },
              { value: entity.qx, name: '缺陷' },
            ],
            itemStyle:{
              borderRadius: 5,
            },
            label:{
              show: true,
              formatter: (val) => {
                return `${val.data.name}` + `\n${val.data.value}`;
              },
            }
          }
        ]
      };
      GetEcharts(this,this.$refs.sourceRef,option)
    }
  },
  watch: {
    logoinfo: {
      deep: true,
      async handler(val){
        if (val.orgNo) {
          const {data:{entity}}=await getworkfromapi({ buro: this.logoinfo.orgNo })
          this.getscopedech(entity)
        }
      }
    }
  }
};
</script>
<style scoped>
.Source{
  height:100%;
}
</style>